<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    
    <!--表示使用IE最新的渲染模式进行解析-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
    	兼容一些移动设备，会根据屏幕的大小缩放
    	width=device-width  表示宽度是设备的宽度（很多手机的宽度都是980px）
    	initial-scale=1  初始化缩放级别   1-5
    	minimum-scale=1  maximum-scale=5
    	user-scalable=no  禁止缩放
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>专辑管理</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    
    <!-- 如果IE版本小于9，加载以下js,解决低版本兼容问题 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    
    <!--
    	引入网络的jquery  ,如果想换成自己的，导入即可
    	网站优化：建议将你网站的css\js等代码，放置在互联网公共平台上维护，比如：七牛
    -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>
    <script src="js/confirm.js"></script>
    <style type="text/css">
    	  th{
    	  	 text-align: center;
    	  }
    </style>
    <script type="text/javascript">
         function showAddPage() {
		location.href = "addCourse.action";
	}
    	function delCourseById(obj, id, name) {
         
		Confirm.show('溫馨提示', '您確定要刪除' + name + '嗎？', {
			'Delete' : {
				'primary' : true,
				'callback' : function() {
					//此处需要调用ajax
					var params = {
						"id" : id
					};
					$.post("courseDel.action", params, function(data) {
						if (data == 'success') {
							Confirm.show('处理结果', '恭喜您删除成功');
							//请用js删除掉那条记录
							$(obj).parent().parent().remove();
						} else {
							Confirm.show('处理结果', '操作失败');
						}
					});

				}
			}
		});

		//阻止事件默认行为   a  href  onclick  
		//先执行onclick  后跳转
		return false;
	}
	$(function() {
		$("#btn").click(function() {
			if (deleteNum > 0) {

				Confirm.show('溫馨提示', '您確定要刪除这' + deleteNum + '条记录嗎？', {
					'Delete' : {
						'primary' : true,
						'callback' : function() {
							//不是ajax，模拟提交
							$("form").submit();
							//如果是一个正常表单的提交，按钮必须是type=submit,并且必须在form表单里面
						}
					}
				});

			}

		});

	});
	var deleteNum = 0;
	function selectAll(obj) {
		//dom  jquery
		var value = obj.checked;
		//alert(value);
		var arr = document.getElementsByName("ids");
		for (var i = 0; i < arr.length; i++) {
			arr[i].checked = value;
		}
		if (value) {
			deleteNum = arr.length;
		} else {
			deleteNum = 0;
		}

		$("#delNum").text(deleteNum);

	}

	function selectOne(obj) {
		if (obj.checked) {
			deleteNum += 1;
		} else {
			deleteNum -= 1;
		}

		if (deleteNum == 0) {
			document.getElementById("checkAllId").checked = false;
		}

		var arr = document.getElementsByName("ids");
		if (deleteNum == arr.length) {
			document.getElementById("checkAllId").checked = true;
		}

		$("#delNum").text(deleteNum);
	}
    </script>
  </head>
  <body>
  	
  	
    <nav class="navbar-inverse">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          
          <a class="navbar-brand" href="videoList.action">视频管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
          <ul class="nav navbar-nav">
            <li ><a href="videoList.action">视频管理</a></li>
            <li ><a href="showSpeakerList.action">主讲人管理</a></li>
            <li class="active"><a href="showCourseList.action">课程管理</a></li>
            
          </ul>
          <p class="navbar-text navbar-right">
					<span>${userName}</span> <i class="glyphicon glyphicon-log-in"
						aria-hidden="true"></i>&nbsp;&nbsp;<a href="exit.action"
						class="navbar-link">退出</a>
				</p>
        </div><!-- /.navbar-collapse -->
        
        
      </div><!-- /.container-fluid -->
    </nav>
    
    <div class="jumbotron" style="padding-top: 15px;padding-bottom: 15px;">
	  <div class="container">
	          <h2>专辑管理</h2>
	  </div>
	</div>
	
		
	
	<div class="container">
		 <div class="btn-group">
	      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Web前端<span class="caret"></span></button>
	      <ul id="selectSpeaker" class="dropdown-menu">
							         <c:forEach items="${speakerList}" var="speaker">
							            <li value='${speaker.id}'><a href="#" onclick="showName(this,'${speaker.id}',1)">${speaker.speakerName}</a></li>
							         </c:forEach>
							          <!-- <li ><a href="#" onclick="showName(this,1,1)">闫振伟</a></li>
							          <li ><a href="#" onclick="showName(this,2,1)">李文魁</a></li>
							          <li ><a href="#" onclick="showName(this,3,1)">石军培</a></li>  -->
							        </ul>
	    </div>
	    
	    <button onclick="showAddPage()" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		      添加
		</button>
		<button id="btn" class="btn btn-primary" type="button">
			批量删除 <span class="badge" id="delNum">0</span>
		</button>
	</div>
	
	<div class="container" style="margin-top: 20px;">
		<form action="delBatchCourses.action" method="post">
		<table class="table table-bordered table-hover" style="text-align: center;">
      <thead >
        <tr class="active">
           <td><input type="checkbox" onclick="selectAll(this)"
							id="checkAllId" /></td>
		  <td>序号</td>					
          <td>名称</td>
          <td>简介</td>
          <td>视频</td>
          <td>编辑</td>
          <td>删除</td>
        </tr>
      </thead>
      <tbody>
        
        
        <c:forEach items="${list}" var="course" varStatus="status">
        <tr>
           <td><input type="checkbox" name="ids" value="${course.id}"
								onclick="selectOne(this)" /></td>
			<td>${status.index+1}</td>					
           <td>${course.courseTitle}</td>
          <td>${course.courseDesc}</td>
           <td><a href="#"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span></a></td>
           <td><a href="courseEdit.action?id=${course.id}"><span
									class="glyphicon glyphicon glyphicon-edit" aria-hidden="true"></span></a></td>
          <td><a onclick="return delCourseById(this,'${course.id}','${course.courseTitle}')"><span
									class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
        </tr>
        </c:forEach>
        </tbody>
      </table>
       </form>
	</div>
  </body>
</html>